<script setup lang="ts">
import { ref } from 'vue'
import type { ListResultData } from '@/api/base'
import { ElMessage } from 'element-plus'
import type { BlogTagsResult } from '@/api/blog'
import { getBlogTags } from '@/api/blog'
import AddEditTagDialog from './components/AddEditTagDialog.vue'

interface filterFormObj {
  key?: string
}
const addEditDialogTitle = ref('')
const loading = ref(false)
const addEditTagDialog = ref<InstanceType<typeof AddEditTagDialog>>()
const filterForm = ref<filterFormObj>({ key: '' })
const currentRow = ref<BlogTagsResult | undefined>(undefined)
const isEditInfo = ref(false)
const userData = ref({
  mode: 'config',
  data: { list: [] as any[], total: 0 },
  auto: true,
  isPager: false,
  columns: [
    { label: 'id', prop: 'id', width: '70' },
    { label: '标签名', prop: 'tagName', width: '100' },
    { label: '标签说明', prop: 'tagDesc', minWidth: '140' },
    { label: '状态', prop: 'enable', slot: true, width: '90' },
    { label: '创建时间', prop: 'createDate', width: '166' },
    { label: '更新时间', prop: 'updateDate', width: '166' },
    { label: '操作', fixed: 'right', prop: 'actions', width: '96', slot: true }
  ],
  index: true
})
// 接口请求
// 说明： 设置 auto = true, callback = getTableDataFn 当切换分页时，自动调用 callback 回调
const getTableDataFn = async () => {
  loading.value = true
  const res = await getBlogTags({ key: filterForm.value?.key || '' })
  loading.value = false
  if (res.code === 200) {
    const data = res.data as BlogTagsResult[]

    userData.value.data = { list: data, total: data.length } as ListResultData<BlogTagsResult>
  } else {
    ElMessage({ message: res?.msg || '网络异常，请稍后重试', type: 'error' })
  }
}
function editTagHandler(row: BlogTagsResult) {
  addEditTagDialog.value!.openDialog()
  isEditInfo.value = true
  addEditDialogTitle.value = '修改标签信息'
  currentRow.value = { ...row }
}

// 新增标签
function addTagHandler() {
  currentRow.value = undefined
  isEditInfo.value = false
  addEditTagDialog.value!.openDialog()
  addEditDialogTitle.value = '新增标签'
}
</script>

<template>
  <div class="my-page-container box-bg-color">
    <div class="my-page-main">
      <div class="my-filter-form">
        <div class="my-top-title">
          <span class="my-primary-title">文章标签管理</span>
          <div class="my-top-btns">
            <el-button type="primary" @click="addTagHandler">新增</el-button>
          </div>
        </div>
        <el-divider></el-divider>
        <el-form :model="filterForm" inline>
          <el-form-item label="查询条件">
            <el-input v-model="filterForm.key" placeholder="标签名/描述"></el-input>
          </el-form-item>
          <el-button class="at-fr" @click="getTableDataFn">查询</el-button>
        </el-form>
      </div>
      <div class="my-main-content">
        <k-table
          ref="userTableRef"
          v-bind="userData"
          :callback="getTableDataFn"
          :loading="loading"
          border
          stripe
          current-row-key="id"
          style="width: 100%"
        >
          <template #enable="{ row }">
            <k-badge
              :type="row.enable === true ? 'success' : 'danger'"
              :content="row.enable === true ? '可用' : '不可用'"
            ></k-badge>
          </template>
          <template #actions="{ row }">
            <el-button type="primary" plain @click="editTagHandler(row)">修改</el-button>
          </template>
        </k-table>
      </div>
    </div>
    <AddEditTagDialog
      :title="addEditDialogTitle"
      ref="addEditTagDialog"
      :current-data="currentRow"
      :is-edit="isEditInfo"
      @handle-refresh="getTableDataFn"
    ></AddEditTagDialog>
  </div>
</template>

<style scoped lang="scss">
.my-page-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  .my-filter-form {
    flex: 1 1 100px;
    .my-top-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > span {
        font-size: 18px;
      }
    }
  }
  .my-main-content {
    flex: 1 1 calc(100% - 100px);
    overflow: hidden;
    .k-table-container {
      height: 100%;
      ::v-deep(.k-table__inner) {
        height: 100%;
      }
    }
  }
}
</style>
